<template>
  <div>
    <h3>首页</h3>
    <button @click="$router.go(-1)">后退</button>&nbsp;
    <button @click="$router.push('/movie/2/长津湖')">看长津湖</button>&nbsp;
    <button @click="aa">看绿皮书</button>&nbsp;
    <button @click="bb">查看歌手张惠妹</button>&nbsp;
  </div>
</template>
<script>
export default {
  methods: {
    aa() {
      // 1、字符串写法
      // this.$router.push('/movie/6/绿皮书')
      // 2、对象写法--使用path跳转(有问题，参数带不过去)
      this.$router.push({
        path: '/movie', // 写路由规划的name
        params: {
          id: 6,
          name: '绿皮书'
        }
      })
      // 3、对象写法--使用name跳转--可以跳转成功
      this.$router.push({
        name: 'movie', // 写路由规划的name
        params: {
          id: 6,
          name:'绿皮书'
        }
      })
    },
    bb() {
      // 1、字符串写法
      // this.$router.push('/music?id=8&name=张惠妹')
      // 2、对象写法(path跳转)
      // this.$router.push({
      //   path: '/music',
      //   query: {
      //     id: 8,
      //     name: '张惠妹'
      //   }
      // })
      // 3、对象写法(name跳转)
      this.$router.push({
        name: 'music',
        query: {
          id: 8,
          name: '张惠妹'
        }
      })
    }
  }
}
</script>
<style scoped>
div{
  min-height: 200px;
  background-color: red;
}
</style>